/* ============================================================ LAVIET — Design System / 设计体系 Taste Vietnam, Live Laviet ------------------------------------------------------------ 单一来源的设计令牌（颜色 + 字体）。在 Claude Code 项目里： 1. 把整个文件夹放进项目（建议 /src/styles/ 或 /assets/） 2. 在全局入口引入： @import "./theme.css"; 3. 一律用 var(--token) 取值，不要写死颜色 / 字号 ============================================================ */ /* ---- 1. 字体载入 / FONT LOADING ---------------------------- 托管在 Google Fonts，全部带越南语字符集（Phở / Bánh / ẹ ự ố …）。 也可改用自托管，见 README.md。 */ @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Caveat:wght@500;600;700&family=Bagel+Fat+One&family=Pacifico&display=swap'); /* Bagel Fat One = 块感主标题（吸收自手绘字标 "VIETNAMESE STYLE"） Pacifico = 毛笔装饰单词（吸收自手绘字标 "Phở"） */ :root { /* ========================================================= 2. 原始调色板 / RAW COLOR SCALES 采样自品牌物料（斗笠标志、河粉插画、菜单卡）。 500 = 品牌锚点色。不要在页面里直接用过浅 / 过深的档位做大面积。 ========================================================= */ /* GREEN — 主色 · 越南绿 / brand primary (logo script, hero) */ --green-50: #ECF9F2; --green-100: #B9E9D2; --green-200: #85DBB1; --green-300: #50CE91; --green-400: #2EAD70; --green-500: #1F7A4E; /* ◆ 锚点 */ --green-600: #1A6943; --green-700: #155838; --green-800: #11472D; --green-900: #0C3622; /* BROWN — 深棕 / 斗笠笔触、深色版面、正文墨色 */ --brown-50: #F7F1EE; --brown-100: #E0CABE; --brown-200: #CAA38D; --brown-300: #B57C5B; --brown-400: #8B5A3D; --brown-500: #5B3A27; /* ◆ 锚点 */ --brown-600: #4E3221; --brown-700: #42291B; --brown-800: #352116; --brown-900: #281910; /* COFFEE — 浅咖 / 焦糖 / 强调、按钮次级、价格标签 */ --coffee-50: #F8F5F2; --coffee-100: #E9DDD2; --coffee-200: #DAC5B2; --coffee-300: #CBAD92; --coffee-400: #BD9571; --coffee-500: #B07D4F; /* ◆ 锚点 */ --coffee-600: #966A43; --coffee-700: #7C5736; --coffee-800: #62452A; --coffee-900: #47321F; /* SAGE — 鼠尾草绿 / 菜单插画卡背景、轻松点缀 */ --sage-50: #F9FAF5; --sage-100: #E5EBD1; --sage-200: #D1DCAD; --sage-300: #BECF88; /* ◆ 锚点（菜单卡背景） */ --sage-400: #AFC46C; --sage-500: #A1BA50; --sage-600: #8CA340; --sage-700: #748835; --sage-800: #5D6D2A; --sage-900: #45511F; /* CREAM — 米黄 / 斗笠纸、页面底色、宣纸质感 */ --cream-50: #FCFCFA; --cream-100: #F1E7CE; /* ◆ 锚点（品牌米黄底） */ --cream-200: #E9D9B1; --cream-300: #E1CB94; --cream-400: #D9BD77; --cream-500: #D2B05A; --cream-600: #CAA23D; --cream-700: #B38D30; --cream-800: #967628; --cream-900: #796020; /* SOIL — 土色 / 中性暖灰，用于分隔线、占位、弱化文字 */ --soil-100: #EDE4D6; --soil-300: #D6C3A6; --soil-500: #C8A074; --soil-700: #9A7A55; /* BLUSH — 浅粉 / 插画卡背景扩展色（非官方品牌主色板） */ --blush-50: #FDEFFA; --blush-100: #FCE1ED; --blush-200: #F6CCDA; /* ◆ 锚点 */ --blush-300: #EFB5CC; --blush-400: #E79EBE; --blush-500: #DF87B0; --blush-600: #D770A3; --blush-700: #CF5995; --blush-800: #C74287; --blush-900: #BF2B79; /* 纯白 / 用得很克制，只在图片、卡片留白处 */ --white: #FBFAF6; /* ========================================================= 3. 语义令牌 / SEMANTIC TOKENS ← 页面里优先用这一组 改主题只需改这里的指向，不用动每个组件。 ========================================================= */ /* 背景与表面（浅色版面，默认） */ --color-bg: var(--cream-100); /* 页面底色 */ --color-bg-raised: var(--cream-50); /* 卡片 / 浮层 */ --color-surface: var(--white); /* 输入框、最上层表面 */ --color-surface-sunken: var(--cream-200); /* 下凹区、代码块 */ /* 文字 */ --color-text: var(--brown-900); /* 正文主色 */ --color-text-muted: var(--brown-400); /* 次要说明 */ --color-text-subtle: var(--soil-700); /* 占位 / 禁用 */ --color-text-inverse: var(--cream-50); /* 深底上的文字 */ /* 主色 / 行动 */ --color-primary: var(--green-500); --color-primary-hover: var(--green-600); --color-primary-active: var(--green-700); --color-on-primary: var(--cream-50); /* 绿底上的文字 */ /* 次级 / 强调 */ --color-secondary: var(--brown-500); --color-on-secondary: var(--cream-50); --color-accent: var(--coffee-500); /* 焦糖强调、价格、链接悬停 */ --color-accent-hover: var(--coffee-600); /* 描边与分隔 */ --color-border: var(--soil-300); --color-border-strong: var(--brown-200); --color-divider: var(--cream-300); --color-focus-ring: var(--green-400); /* 状态色（取自品牌色系，保持统一调性） */ --color-success: var(--green-500); --color-warning: var(--coffee-500); --color-danger: #B5482E; /* 辣椒红，呼应品牌插画里的红椒 */ --color-info: var(--green-600); /* 插画卡背景 / 菜单卡（对应品牌的每道菜配色卡） */ --illus-sage: var(--sage-300); /* 河粉 / 牛肉粉卡 */ --illus-blush: var(--blush-200); /* 越南咖啡卡 */ --illus-cream: var(--cream-100); /* 浅底插画卡 */ --illus-forest: var(--green-600); /* 深绿插画卡 */ /* ========================================================= 4. 字体体系 / TYPOGRAPHY SYSTEM 三层结构：展示标题 / 正文界面 / 手写点缀 ========================================================= */ /* 4.1 字族 / FONT FAMILIES 五层：块感主标题 / 圆润 display / 毛笔装饰词 / 手写点缀 / 正文 */ --font-title: 'Bagel Fat One', 'Baloo 2', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; /* Hero 顶级大字，最圆胖 */ --font-display: 'Baloo 2', 'Be Vietnam Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; /* 区块标题，多字重万能 */ --font-body: 'Be Vietnam Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif; --font-script-bold: 'Pacifico', 'Caveat', cursive; /* 毛笔装饰单词：Phở / Cà phê */ --font-script: 'Caveat', 'Baloo 2', cursive; /* 手写点缀，标语用 */ --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace; /* 注：LAVIET 文字标志本身是定制手写，请始终用 SVG 标志资源， 不要用字体替代。--font-script 只用于较短的手写感标语。 */ /* 4.2 字重 / FONT WEIGHTS */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* 4.3 字号阶梯 / TYPE SCALE — 16px 基准 · 1.20 比例（小三度） */ --fs-xs: 0.75rem; /* 12px — 标签、版权 */ --fs-sm: 0.875rem; /* 14px — 辅助说明、表单提示 */ --fs-base: 1rem; /* 16px — 正文 */ --fs-md: 1.125rem; /* 18px — 大正文、引导段 */ --fs-lg: 1.25rem; /* 20px — 小标题 / h5 */ --fs-xl: 1.5rem; /* 24px — h4 */ --fs-2xl: 1.875rem; /* 30px — h3 */ --fs-3xl: 2.25rem; /* 36px — h2 */ --fs-4xl: 3rem; /* 48px — h1 */ --fs-5xl: 3.75rem; /* 60px — 展示大标题 */ --fs-6xl: 4.5rem; /* 72px — Hero 主视觉 */ /* 4.4 行高 / LINE HEIGHT */ --lh-none: 1; --lh-tight: 1.1; /* 展示大标题 */ --lh-snug: 1.25; /* 标题 */ --lh-normal: 1.5; /* 正文 */ --lh-relaxed: 1.7; /* 长段落、说明文 */ /* 4.5 字距 / LETTER SPACING */ --ls-tight: -0.02em; /* 大号标题收紧 */ --ls-normal: 0; --ls-wide: 0.06em; --ls-widest: 0.18em; /* 全大写标语 "TASTE VIETNAM" 风格 */ /* ========================================================= 5. 圆角 / RADIUS — 品牌偏圆润手作感 ========================================================= */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; /* 菜单卡 / 主要卡片 */ --radius-xl: 32px; --radius-pill: 999px; /* 按钮、标签 */ /* ========================================================= 6. 阴影 / SHADOW — 暖棕调，避免冷灰 ========================================================= */ --shadow-sm: 0 1px 2px rgba(40, 25, 16, 0.08); --shadow-md: 0 4px 14px rgba(40, 25, 16, 0.10); --shadow-lg: 0 12px 32px rgba(40, 25, 16, 0.14); } /* ============================================================ 7. 深色版面作用域 / DARK SECTION SCOPE 品牌有大量深绿 / 深棕版面（Hero、社媒卡）。给这些区块 加 class="theme-dark" 或 class="theme-forest"，语义令牌 会自动翻转，组件代码无需改动。 ============================================================ */ .theme-dark, .theme-forest { --color-bg: var(--green-700); --color-bg-raised: var(--green-600); --color-surface: var(--green-800); --color-surface-sunken: var(--green-900); --color-text: var(--cream-50); --color-text-muted: var(--sage-200); --color-text-subtle: var(--green-200); --color-text-inverse: var(--brown-900); --color-primary: var(--cream-100); --color-primary-hover: var(--white); --color-on-primary: var(--green-800); --color-accent: var(--coffee-300); --color-accent-hover: var(--coffee-200); --color-border: var(--green-600); --color-border-strong: var(--green-400); --color-divider: var(--green-600); } /* 深棕版面（如标语条、页脚） */ .theme-coffee { --color-bg: var(--brown-600); --color-bg-raised: var(--brown-500); --color-surface: var(--brown-700); --color-text: var(--cream-50); --color-text-muted: var(--coffee-200); --color-text-inverse: var(--brown-900); --color-primary: var(--sage-300); --color-primary-hover: var(--sage-200); --color-on-primary: var(--brown-800); --color-accent: var(--coffee-200); --color-border: var(--brown-400); --color-divider: var(--brown-500); } /* ============================================================ 8. 基础排版 / BASE TYPOGRAPHY 可选——若项目已有 reset / 框架默认样式，可删掉本段， 只保留上面的令牌。 ============================================================ */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--color-text); margin: 0; } h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); letter-spacing: var(--ls-normal); } p { margin: 0 0 1em; line-height: var(--lh-relaxed); } a { color: var(--color-accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--color-accent-hover); } small { font-size: var(--fs-sm); color: var(--color-text-muted); } :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* ============================================================ 9. 排版工具类 / TYPOGRAPHY UTILITIES（可选便捷类） ============================================================ */ .font-title { font-family: var(--font-title); } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-script { font-family: var(--font-script); } .font-script-bold { font-family: var(--font-script-bold); } /* 全大写宽字距标语，对应品牌 "TASTE VIETNAM / LIVE LAVIET" */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-accent); } /* 手写感标语，对应 "Savor the Spirit of Vietnam" */ .tagline-script { font-family: var(--font-script); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--color-primary); } /* ============================================================ 10. 品牌标题视觉层 / BRAND TITLE TREATMENT 把两张手绘字标（"VIETNAMESE STYLE" / "Phở"）的形态吸收成 可复用组件：渐变填充 + 包边 + 水彩纹理 + 抬起投影。 ------------------------------------------------------------ 用法：

Phở

└ 基类 └ 字形 └ 配色皮肤 └ 包边层要读这个文本 注意：包边靠 ::before 读 data-text，所以 data-text 必须 = 可见文字。 ------------------------------------------------------------ 配色变量（全部指向上面的品牌调色板，换色只改这 4 个）： --bt-fill-top 渐变上端（亮） --bt-fill-bottom 渐变下端（暗） --bt-stroke 包边色 --bt-stroke-w 包边粗细 ============================================================ */ /* 水彩斑驳纹理：内联 SVG 噪声，soft-light 叠在渐变上 = 手绘水彩感。 不依赖任何图片文件，颜色由渐变决定。 */ :root { --bt-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .bt { font-family: var(--bt-font, var(--font-title)); font-weight: var(--bt-weight, 400); line-height: 0.95; letter-spacing: var(--bt-tracking, -0.01em); position: relative; display: inline-block; /* 填充 = 水彩纹理 ⊕ 品牌色渐变，一起裁切进字形 */ background-image: var(--bt-texture), linear-gradient(177deg, var(--bt-fill-top, var(--green-200)) 8%, var(--bt-fill-bottom, var(--green-600)) 96%); background-blend-mode: soft-light, normal; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.06)); } /* 包边层：同字、置于身后，只描边不填充 + 抬起投影（"贴纸感"） */ .bt::before { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; -webkit-text-stroke: var(--bt-stroke-w, 7px) var(--bt-stroke, var(--green-900)); color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 3px 0 var(--bt-stroke, var(--green-900)), 0 8px 14px rgba(40, 25, 16, 0.28); } /* —— 字形 —— */ .bt--block { --bt-font: var(--font-title); --bt-weight: 400; } /* Bagel Fat One，最贴 VIETNAMESE */ .bt--baloo { --bt-font: var(--font-display); --bt-weight: 800; --bt-stroke-w: 6px; } /* Baloo 2，区块标题 */ .bt--script { --bt-font: var(--font-script-bold); --bt-weight: 400; /* Pacifico，毛笔装饰词 */ --bt-stroke-w: 5px; --bt-tracking: 0; line-height: 1.15; } /* —— 配色皮肤（呼应区块作用域） —— */ .bt--green { --bt-fill-top: var(--green-200); --bt-fill-bottom: var(--green-600); --bt-stroke: var(--green-900); } /* 复刻 VIETNAMESE STYLE */ .bt--coffee { --bt-fill-top: var(--coffee-200); --bt-fill-bottom: var(--brown-600); --bt-stroke: var(--brown-900); } /* 复刻 Phở */ .bt--caramel{ --bt-fill-top: var(--cream-200); --bt-fill-bottom: var(--coffee-600); --bt-stroke: var(--brown-800); } /* 焦糖 · 菜单/强调 */ .bt--cream { --bt-fill-top: var(--cream-50); --bt-fill-bottom: var(--cream-300); --bt-stroke: var(--green-800); } /* 深底浅字 · theme-dark/coffee 上 */ /* 无障碍：偏好减少动效不影响本组件（纯静态），保留以备未来加动效。 注：-webkit-text-stroke 在所有现代浏览器（含 Safari/Chrome/Firefox）均支持； 极旧浏览器会优雅降级为「纯渐变填充无包边」，文字仍可读。 */ /* Hero 展示标题 */ .display { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .text-muted { color: var(--color-text-muted); } .text-subtle { color: var(--color-text-subtle); } /* ---- 品牌标识组件 / BRAND IDENTITY ---- */ .brand-identity { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; } .brand-identity img { display: block; height: auto; } .brand-identity__name { font-family: var(--font-display); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); color: var(--color-text); } /* 导航栏尺寸 */ .brand-identity--nav { flex-direction: row; gap: 0.75rem; } .brand-identity--nav img { height: 36px; } .brand-identity--nav .brand-identity__name { font-size: var(--fs-2xl); } /* Hero 尺寸 */ .brand-identity--hero img { height: 100px; } .brand-identity--hero .brand-identity__name { font-size: var(--fs-5xl); } /* 分店卡片尺寸 */ .brand-identity--card { flex-direction: row; gap: 0.75rem; } .brand-identity--card img { height: 40px; } .brand-identity--card .brand-identity__name { font-size: var(--fs-xl); } /* Footer 尺寸 */ .brand-identity--footer img { height: 32px; } .brand-identity--footer .brand-identity__name { font-size: var(--fs-2xl); } /* ---- 地区选择按钮 / REGION SELECTOR ---- */ .region-btn { background: none; border: none; padding: 0.25rem 0.5rem; cursor: pointer; color: var(--color-text); font-family: var(--font-body); font-size: inherit; font-weight: inherit; transition: color 0.2s ease; } .region-btn:hover { color: var(--color-primary); } .region-btn.region-active { color: var(--color-primary); font-weight: var(--fw-semibold); } /* ---- 语言按钮 / LANGUAGE BUTTON ---- */ .lang-btn { background: none; border: none; padding: 0.25rem 0.5rem; cursor: pointer; color: var(--color-text); font-family: var(--font-body); font-size: inherit; font-weight: inherit; transition: color 0.2s ease; } .lang-btn:hover { color: var(--color-primary); } .lang-btn.lang-active { color: var(--color-primary); font-weight: var(--fw-semibold); } /* ---- 区段间距 / SECTION SPACING ---- */ .section-spacing { padding-top: 80px; padding-bottom: 80px; } @media (max-width: 768px) { .section-spacing { padding-top: 60px; padding-bottom: 60px; } }